<template>
   <div class="home">
   <home-header></home-header>
   <home-swiper :swiperList='swiperList'></home-swiper>
   <home-icons :iconsList='iconsList'></home-icons>
   <home-location></home-location>
   <home-activity></home-activity>
   <home-hot :hotList='hotList'></home-hot>
   <home-like :likeList='likeList'></home-like>
   <home-vacation :vacationList='vacationList'></home-vacation>
   <HomeFooter></HomeFooter>
   </div>
</template>

<script>
 import {mapState} from 'vuex'
 import HomeHeader from './pages/Header'
 import HomeSwiper from './pages/Swiper'
 import HomeIcons from './pages/Icons'
 import HomeLocation from './pages/Location'
 import HomeActivity from './pages/Activity'
 import HomeHot from './pages/Hot'
 import HomeLike from './pages/Like'
 import HomeVacation from './pages/Vacation'
 import HomeFooter from './pages/Footer'
 export default{
     components:{
         HomeHeader,
         HomeSwiper,
         HomeIcons,
         HomeLocation,
         HomeActivity,
         HomeHot,
         HomeLike,
         HomeVacation,
         HomeFooter
     },
     computed:{
        ...mapState(['city'])//拿到vuex的city 以下是this.city
     },
     data () {
		return {
			swiperList:[],
			iconsList:[],
			hotList:[],
			likeList:[],
         vacationList:[],
         changecity:''
		}
    },
    
    methods:{
        getHttp(){
           console.log(this.city)
         this.axios.get("/api/datahome.json")
         .then((res)=>{
            const data= res.data.data;
            data.forEach((item,index)=>{ 
                if(item.city==this.city){//如果json里的city等于vuex里的city
                    this.swiperList=item.swiperList; //选中城市的swiperlist数据就等于data里的swiperlist数据
                    this.iconsList=item.iconsList;
                    this.hotList=item.hotList;
                    this.likeList=item.likeList;
                    this.vacationList=item.vacationList;
               }
            })  
         })
      }
     },
     mounted(){
     this.getHttp()
     this.changecity=this.city 
    },
    //优化请求 如果改变的城市不等于当前城市则发送请求，如果相等返回首页则不发送请求
     activated(){
        if(this.changecity != this.city){
			this.getHttp();
			this.changecity=this.city;
		}
	}
   }
</script>
<style scoped>
 .home{
    background: #f5f5f5;
 }
</style>